<template>
	<view class="linkman-page app-bank-top" :style="{paddingTop: customBar + 'px'}">
		<view class="mian-title">我的银行卡</view>
		<view class="main-sub">为保障您的扣款服务正常，建议您绑定您的常用银行卡；便于您支付宝余额不足时扣款使用，保障您每期账单正常缴纳！</view>
		<view class="main-content">
			<view class="item">
				<view class="label">持卡人姓名</view>
				<input type="text" @input="inputChange" id="username" :value="form.username" class="set" placeholder="请填写您本人的真实姓名" />
			</view>
			<view class="item">
				<view class="label">银行卡号</view>
				<input type="text" @input="inputChange" id="account" :value="form.account"  class="set" placeholder="请填写您本人的银行卡号" />
			</view>
			<view class="item">
				<view class="label">预留手机号</view>
				<input type="number" @input="inputChange" id="mobile" :value="form.mobile" class="set" placeholder="请填写您本人的预留手机号" />
			</view>
			<!-- <view class="item">
				<view class="label">验证码</view>
				<view style="position: relative;">
					<input type="number" @input="inputChange" id="code" :value="form.code" class="set" placeholder="请填写验证码" maxlength="6" />
					<view class="get-code">获取验证码</view>
				</view>

			</view> -->
			<view class="post-btn app-btn-bg" @click="confirmSubmit">确定提交</view>
		</view>
	</view>
</template>

<script>
	import {
		bankcardDetail, // 银行卡详情
		addBankcard, // 新增银行卡
		editBankcard, // 编辑银行卡信息
	} from "@/api/bankcard"
	export default {
		data() {
			return {
				customBar: 0, // 状态栏高度 + 导航栏高度 
				form: {
					username: "", // 用户名
					account: "", // 银行卡账号
					mobile: "", // 电话号
					// code: "", // 验证码
				},
				is_detail: false,
			}
		},
		onReady() {
			uni.getSystemInfo({
				success: (e) => {
					let statusBar = 0 //状态栏高度
					let customBar = 0; // 状态栏高度 + 导航栏高度  
					// #ifdef MP-ALIPAY
					statusBar = e.statusBarHeight
					this.customBar = e.statusBarHeight + e.titleBarHeight + 20
					// #endif
				}
			})

		},
		async onLoad() {
			await this.getBankcardDetail();
		},
		methods: {
			/* 新增银行卡 */
			addBankcardFun() {
				addBankcard({
					real_name: this.form.username,
					bank_card_id: this.form.account,
					phone: this.form.mobile,
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: "success"
					})
					this.getBankcardDetail();
					console.log(res, "---res");
				})
			},
			/* 编辑银行卡信息 */
			editBankcardFun() {
				editBankcard({
					real_name: this.form.username,
					bank_card_id: this.form.account,
					phone: this.form.mobile,
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: "success"
					})
					this.getBankcardDetail();
					console.log(res, "---res");
				})
			},
			/* input change */
			inputChange(e) {
				this.form[e.currentTarget.id] = e.detail.value
			},
			/* 获取银行卡详情 */
			getBankcardDetail() {
				bankcardDetail().then(res => {
					if(res.data.constructor === Array) {
						/* 不存在银行卡信息 */
						this.is_detail = false;
					}else {
						this.is_detail = true;
						this.form.username = res.data.real_name
						this.form.account = res.data.bank_card_id
						this.form.mobile = res.data.phone
					}
					console.log(res.data.constructor === Array, "---70");
				})
			},
			/* 提交 */
			confirmSubmit() {
				for(let key in this.form) {
					if(!this.form[key]) {
						uni.showToast({
							title: "请输入完整内容后提交",
							icon: "none"
						})
						return 
					}
				}
				if(this.is_detail) {
					console.log("编辑"); 
					/* 如果存在详情 调用编辑接口 */
					this.editBankcardFun('editBankcard')
				}else {
					console.log("新增"); 
					this.addBankcardFun('addBankcard')
				}
				
				console.log(this.form, "---表单");
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.linkman-page {
		background-image: url('https://wap.yqjy8.vip/uploads/attach/2023/05/20230522/618bfe2d7704be4e07b6bdcdef51bd4f.png');
		background-repeat: no-repeat;
		width: 100%;
		background-color: #fff;
		position: absolute;
		top: 0;
		left: 0;

		.mian-title {
			padding: 0 24rpx;
			font-size: 48rpx;
			font-weight: bold;
			color: rgba(255, 255, 255, .9);
			line-height: 48rpx;
		}

		.main-sub {
			padding: 0 24rpx;
			margin-top: 24rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 40rpx;
		}

		.main-content {
			margin-top: 66rpx;
			padding: 0 24rpx;
			border-radius: 32rpx;
			background-color: #fff;

			.item {
				padding: 48rpx 0 32rpx 0;
				border-bottom: 2rpx solid #F5F5F5;

				.label {
					font-size: 28rpx;
					font-weight: 400;
					color: #1F1F1F;
					line-height: 28rpx;
				}

				.set {
					width: 100%;
					margin-top: 56rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #1F1F1F;
					line-height: 32rpx;
				}

				.get-code {
					position: absolute;
					right: 0;
					bottom: 0;
					font-size: 32rpx;
					font-weight: 400;
					color: #39CCC2;
				}
			}

			.post-btn {
				margin-top: 48rpx;
				height: 96rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: linear-gradient(90deg, #71EBDA 0%, #39CCC2 100%);
				border-radius: 48rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
</style>